Skip to content

feat: Improved contrast in light mode#1179

Open
rwits08 wants to merge 3 commits into
magic-peach:mainfrom
rwits08:main
Open

feat: Improved contrast in light mode#1179
rwits08 wants to merge 3 commits into
magic-peach:mainfrom
rwits08:main

Conversation

@rwits08
Copy link
Copy Markdown

@rwits08 rwits08 commented May 25, 2026 •
edited
Loading

Description

Improved the Light Mode UI accessibility and visual hierarchy across the application.

Changes made

  • Enhanced contrast for muted text and borders in Light Mode

  • Improved upload section readability before video upload

  • Refined FormatSelector UI with:

    • better spacing
    • improved inactive button visibility
    • stronger hover/focus states
    • clearer typography hierarchy

  • Improved ExportSettings section with:

    • card-based layout containers
    • increased spacing
    • improved labels and readability
    • better checkbox sizing and visibility

  • Refined Footer UI by:

    • improving contrast and readability
    • reducing excessive opacity usage
    • improving hover interactions
    • enhancing visual separation from the page

  • Updated global theme tokens (--surface, shadows, borders, muted text) for improved accessibility and cleaner UI consistency

These changes improve WCAG contrast compliance, usability in bright environments, and overall UI polish without affecting existing functionality.

Related Issue

Closes #1037

Type of Contribution

  • Bug fix
  • Refactor
  • GSSoC contribution

Participant Info

  • GitHub username: rwits08
  • Contribution level (Beginner/Intermediate/Advanced): Intermediate

Screen Recording

Reframe.Resize.trim.and.export.videos.in.your.browser.-.Google.Chrome.2026-05-25.21-38-34.mp4

(ADDED A VERY SHORT RECORDING OF 4s ONLY DUE TO VIDEO SIZE RESTRICTION<10MB)

Screenshots if required:

before:
Screenshot 2026-05-25 212524
Screenshot 2026-05-25 212534

after:
Screenshot 2026-05-25 212454
Screenshot 2026-05-25 212507

Checklist

  • I have read the contribution guidelines
  • My changes follow the project structure
  • I have tested my changes in Chrome, Firefox, and Safari
  • bun run lint passes (no ESLint errors)
  • bunx tsc --noEmit passes (no TypeScript errors)
  • New interactive elements have aria-label / accessible names
  • No console.log statements left in
  • This PR is related to a valid issue
  • Screen recording attached above

@vercel
Copy link
Copy Markdown

vercel Bot commented May 25, 2026

@rwits08 is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 25, 2026

👋 Thanks for your PR, @rwits08!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

🟠 GSSoC'26 PR detected — thanks for contributing under GirlScript Summer of Code 2026!

What happens next

  1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
  2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
  3. 👀 Code review — a maintainer will review your changes
  4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

  • PR title follows Conventional Commits (e.g. feat: add dark mode)
  • Linked the issue this PR closes (e.g. Closes #123)
  • Tested the changes locally (bun run dev)
  • Build passes (bun run build)

Useful links

Happy coding! 🎉

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 25, 2026 •
edited
Loading

✅ PR Format Check Passed — @rwits08

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

@github-actions github-actions Bot added gssoc'26 GirlScript Summer of Code 2026 level:advanced Advanced level - 55 pts type:bug Bug fix type:design UI/UX design type:refactor Code refactor labels May 25, 2026
@rwits08 rwits08 changed the title Improved contrast in light mode feat: Improved contrast in light mode May 25, 2026
@rwits08 rwits08 mentioned this pull request May 26, 2026
Open
@rwits08
Copy link
Copy Markdown
Author

rwits08 commented May 31, 2026

Hi @magic-peach

Just providing an update to avoid inactivity.

The fix has already been completed and submitted in PR #1179. The PR is currently awaiting maintainer review and workflow authorization.

Please let me know if any further changes are required. Thank you!

@rwits08
Copy link
Copy Markdown
Author

rwits08 commented Jun 6, 2026

Hi @magic-peach, I've resolved the merge conflicts locally and pushed the updates. However, the claude-discussion-reply GitHub Action is consistently failing on this PR with an Unexpected input(s) 'allowed_non_write_users' error. It looks like a configuration issue with the Claude bot action in the repo's workflow files. Let me know if you need me to do anything else, or if you can bypass it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

gssoc'26 GirlScript Summer of Code 2026 level:advanced Advanced level - 55 pts type:bug Bug fix type:design UI/UX design type:refactor Code refactor

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Contrast issues in light mode

1 participant

@rwits08